<template lang="">
  <div class="menu-warp">
          <div class="menu" >
              <li class="menu-item iconfont icon-liaotian " 
              v-for="item in menuInfo" 
              :key="item.id"
              @click.prevent="menuAction($event,item.name,item.id,menuInfo)"
              :id="item.id" 
              >
                <p :id="item.id" :name="item.name">{{ item.info }}</p>
                <i class="iconfont icon-liaotian"></i>
              </li>
          </div>
            <router-view></router-view>
  </div>
  
</template>
<script>
export default {
  name: "minemenu",
  components: {},
  data() {
    return {
      iptvalue: []
    }
  },
  props: {
    menuInfo: {
      type:Array
    }
  },
  created() {
  },
  methods: {
    menuAction(e, name, id, menuInfo) {
      this.iptvalue = menuInfo.filter((item) => {
        if (item.id === id) {
              return item.info
            }
      })
      // console.log(e, id,name,text);
      // console.log(this.iptvalue);
      this.$router.push({
        name: `${name}`,
        params:{'id':id, data:this.iptvalue}
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .menu{
  width: 100%;
    .menu-item{
      height: 45px;
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 1px solid #b3b4c7;
    }
      .iconfont{
        flex: 1;
        font-size: 18px;
        font-weight: 400;
        padding: 10px 20px;
        color: #a4b9ff;
      p{
        flex: 1;
        font-size: 16px;
        padding-left: 20px;
        color: #32354A;
       }
      i{
        display: flex;
        padding: 0;
        justify-content: flex-end;
        color: #d8d8d8;
      }
    }
  }
</style>